<template>
  <div>
    <Count v-if="isShow" />
    <button @click="isShow = true">加载Count组件</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      isShow: false,
    };
  },
  /* 
      如果xxx是异步组件:
        异步组件:打包的时候分开打包,初始化的时候不会引入这个文件(比如用在路由懒加载,首屏优化)
        原理:
          - 不需要使用import模块化引入组件,否则会一起打包
          - 在注册组件的时候,后边跟一个函数,当被注册的组件被使用的时候,会调用这个函数
          - 注册组件后如果跟的是一个函数,则希望返回一个promise实例(因为是异步加载,所以需要获取加载的状态)
          - 在函数中又能引入其他模块,并且还能返回promise实例,只有ES6提供的import方法     
    */
  components: {
    Count: () => {
      return import("./components/Count.vue");
    },
  },
};
</script>

<style></style>
